<?php $this->load->view('base/header');?>
        
        <section>
            <div class="container_8 clearfix">                

                <!-- Main Section -->

                <section class="main-section grid_8">

                    <!-- Statistics Section -->
                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix fr">
                                <li><a href="#" class="button button-gray no-text"><span class="wrench"></span></a></li>
                                <li><a href="documentation/index.html" class="button button-gray no-text help" rel="#overlay"><span class="help"></span></a></li>
                            </ul>
                            <h2>
                                Statistics
                            </h2>
                        </header>
                        <section class="container_6 clearfix">
                                <div class="grid_4 clearfix">
                                    <header class="clearfix">
                                    <ul class="fr action-buttons">
                                        <li><a href="#" class="current button button-gray no-text" title="Today's Stats"><span class="calendar-view-day"></span></a></li>
                                        <li><a href="#" class="button button-gray no-text" title="This Week's Stats"><span class="calendar-view-week"></span></a></li>
                                        <li><a href="#" class="button button-gray no-text" title="This Month's Stats"><span class="calendar-view-month"></span></a></li>
                                    </ul>
                                    <h3>Today's Stats</h3>
                                    </header>
                                    <section>
                                    <div class="grid_1 alpha">
                                        <div class="widget black ac">
                                            <header><h2>Orders</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Paid Invoices</h2></header>
                                            <section><h1>10</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Affiliate Signups</h2></header>
                                            <section><h1>30</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1 omega">
                                        <div class="widget black ac">
                                            <header><h2>Affiliate Orders</h2></header>
                                            <section><h1>50</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1 alpha">
                                        <div class="widget black ac">
                                            <header><h2>Tickets</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Offline Chats</h2></header>
                                            <section><h1>10</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1">
                                        <div class="widget black ac">
                                            <header><h2>Alerts</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    <div class="grid_1 omega">
                                        <div class="widget black ac">
                                            <header><h2>Errors</h2></header>
                                            <section><h1>20</h1></section>
                                        </div>
                                    </div>
                                    </section>
                                </div>

                                <!-- Progress Bars -->
                                <div class="grid_2">
                                    <h3>Goals</h3>
                                    <table class="simple full">
                                        <tr>
                                            <td style="width: 30%">Newsletters</td><td style="width: 10%" class="ar">20/100</td><td style="width: 60%"><div class="progress progress-red"><span style="width: 20%"><b>20%</b></span></div></td>
                                        </tr>
                                        <tr>
                                            <td>Leads</td><td class="ar">40/100</td><td><div class="progress progress-orange"><span style="width: 40%"><b>40%</b></span></div></td>
                                        </tr>
                                        <tr>
                                            <td>Blog Posts</td><td class="ar">60/100</td><td><div class="progress progress-blue"><span style="width: 60%"><b>60%</b></span></div></td>
                                        </tr>
                                        <tr>
                                            <td>Forum Posts</td><td class="ar">80/100</td><td><div class="progress progress-green"><span style="width: 80%"><b>80%</b></span></div></td>
                                        </tr>
                                    </table>
                                </div>
                                <!-- End Progress Bars -->
                        </section>
                    </div>
                    <!-- End Statistics Section -->

                    <!-- Analytics Section -->
                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix fr">
                                <li><a href="#" class="button button-gray no-text"><span class="wrench"></span></a></li>
                                <li><a href="documentation/index.html" class="button button-gray no-text help" rel="#overlay"><span class="help"></span></a></li>
                            </ul>
                            <h2>
                                Analytics
                            </h2>
                        </header>
                        <section class="sortable container_6 clearfix">
                                <div class="grid_6">
                                    <div class="message notice">You can drag the widget headers to rearrange the widgets. Click on the graph to view its details.</div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-1" draggable="true">
                                    <h2 class="report-icon">Reporting Bar Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-bar" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-2" draggable="true">
                                    <h2 class="report-icon">Reporting Filled Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-filled" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-3" draggable="true">
                                    <h2 class="report-icon">Reporting Line Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-line" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-4" draggable="true">
                                    <h2 class="report-icon">Report Points Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-points" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-5" draggable="true">
                                    <h2 class="report-icon">Report Bar Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-bar2" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                                <div class="grid_2 widget-container" id="sortable-6" draggable="true">
                                    <h2 class="report-icon">Report Line Graph</h2>
                                    <div class="widget has-details">
                                        <header>
                                            <ul class="fr action-buttons small">
                                                <li><a href="#" class="widget-close"><span class="close"></span></a></li>
                                            </ul>
                                            <h2><a rel="#report-details">As of January, 2011</a></h2>
                                        </header>
                                        <section>
                                            <div id="reporting-line2" class="report-preview"></div>
                                        </section>
                                    </div>
                                </div>
                        </section>
                    </div>
                    <!-- End Analytics Section -->

                </section>

                <!-- Main Section End -->

            </div>
        </section>
    </div>

    <div class="overlay-details" id="report-details">
        <header>
            <hgroup>
                <h2>Sample Details Table</h2>
                <h6>From January 01 to January 31, 2011</h6>
            </hgroup>
        </header>
        <section>
            <table class="datatable tablesort selectable paginate full">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Major</th>
                        <th>English</th>
                        <th>Calculus</th>
                        <th>Geometry</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th><th>Major</th><th>English</th><th>Calculus</th><th>Geometry</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Student01</td><td>Languages</td><td>80</td><td>75</td><td>80</td>
                    </tr>
                    <tr>
                        <td>Student02</td><td>Mathematics</td><td>90</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student03</td><td>Languages</td><td>85</td><td>80</td><td>85</td>
                    </tr>
                    <tr>
                        <td>Student04</td><td>Languages</td><td>60</td><td>100</td><td>100</td>
                    </tr>
                    <tr>
                        <td>Student05</td><td>Languages</td><td>68</td><td>95</td><td>80</td>
                    </tr>
                    <tr>
                        <td>Student06</td><td>Mathematics</td><td>100</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student07</td><td>Mathematics</td><td>85</td><td>90</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student08</td><td>Languages</td><td>100</td><td>90</td><td>85</td>
                    </tr>
                    <tr>
                        <td>Student09</td><td>Mathematics</td><td>80</td><td>65</td><td>75</td>
                    </tr>
                    <tr>
                        <td>Student10</td><td>Languages</td><td>85</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student11</td><td>Languages</td><td>86</td><td>100</td><td>100</td>
                    </tr>
                    <tr>
                        <td>Student12</td><td>Mathematics</td><td>100</td><td>70</td><td>85</td>
                    </tr>
                    <tr>
                        <td>Student13</td><td>Languages</td><td>100</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student14</td><td>Languages</td><td>50</td><td>55</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student15</td><td>Languages</td><td>95</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student16</td><td>Languages</td><td>100</td><td>30</td><td>70</td>
                    </tr>
                    <tr>
                        <td>Student17</td><td>Languages</td><td>80</td><td>55</td><td>65</td>
                    </tr>
                    <tr>
                        <td>Student18</td><td>Mathematics</td><td>30</td><td>55</td><td>75</td>
                    </tr>
                    <tr>
                        <td>Student19</td><td>Languages</td><td>68</td><td>88</td><td>70</td>
                    </tr>
                    <tr>
                        <td>Student20</td><td>Mathematics</td><td>40</td><td>40</td><td>80</td>
                    </tr>
                    <tr>
                        <td>Student21</td><td>Languages</td><td>50</td><td>100</td><td>100</td>
                    </tr>
                    <tr>
                        <td>Student22</td><td>Mathematics</td><td>100</td><td>100</td><td>90</td>
                    </tr>
                    <tr>
                        <td>Student23</td><td>Languages</td><td>85</td><td>80</td><td>80</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>

<script>
$(function () {
    /**
     * Charts and Graphs Setup
     */
    var options = {
        grid: { hoverable: true, clickable: true, labelMargin: 10, borderWidth: 1, borderColor: "#ccc" },
        colors: ["#0077FF"],
        shadowSize: 2,
	        xaxis: {
	            mode: null,
	            ticks: [
	                [1, "1"],
	                [2, "3"],
	                [3, "5"],
	                [4, "7"],
	                [5, "9"],
	                [6, "11"],
	                [7, "13"],
	                [8, "15"],
	                [9, "17"],
	                [10, "19"],
	                [11, "21"],
	                [12, "23"],
	                [13, "25"],
	                [14, "27"],
	                [15, "29"]
	            ]
	        }
    };

    var d1 = [[0, 3], [4, 8], [8, 5], [9, 13], [15, 12]];

    $.plot($("#reporting-bar"), [
        {
            data: d1,
            bars: { show: true }
        }
    ], options);

    $.plot($("#reporting-bar2"), [
        {
            data: d1,
            bars: { show: true }
        }
    ], options);

    $.plot($("#reporting-filled"), [
        {
            data: d1,
            lines: { show: true, fill: true }
        }
    ], options);

    $.plot($("#reporting-line"), [
        {
            data: d1,
            lines: { show: true }
        }
    ], options);

    $.plot($("#reporting-line2"), [
        {
            data: d1,
            lines: { show: true }
        }
    ], options);

    $.plot($("#reporting-points"), [
        {
            data: d1,
            lines: { show: true },
            points: { show: true }
        }
    ], options);

});
</script>

<?php $this->load->view('base/footer');?>
